{% extends 'admin/base.html' %}

{% block content %}
    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h3>写文章</h3>
                </div>

            </div>
            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_content">

                            <form class="form-horizontal form-label-left" method="post"
                                  action="{{ url_for('admin.news_form') }}"
                                  novalidate>
                                <!--标题-->
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="title">标题 <span
                                            class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input class="form-control col-md-7 col-xs-12" id="title" required="required"
                                               type="text"/>
                                    </div>
                                </div>
                                <!--作者-->
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="author">作者 <span
                                            class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input class="form-control col-md-7 col-xs-12" id="author" required="required"
                                               type="text">
                                    </div>
                                </div>
                                <!--新闻类型-->
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="type">新闻类型 <span
                                            class="required">*</span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select class="form-control col-md-7 col-xs-12" id="news_type"
                                                required="required">
                                            <option value="推荐">推荐</option>
                                        </select>
                                    </div>
                                </div>

                                <!--图片展示-->
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">缩略图展示方式
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select class="form-control col-md-7 col-xs-12"
                                                id="media_type"
                                        >
                                            <option value="none">无</option>
                                            <option value="normal">平铺</option>
                                            <option value="content">居中</option>
                                            <option value="right">右侧</option>
                                        </select>
                                    </div>
                                </div>

                                <!--正文-->
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">正文 <span
                                            class="required">*</span>
                                    </label>
                                    <div class="x_content">
                                        <div id="alerts"></div>
                                        <div class="btn-toolbar editor" data-role="editor-toolbar"
                                             data-target="#editor-one">
                                            <div class="btn-group">
                                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i
                                                        class="fa fa-font"></i><b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                </ul>
                                            </div>

                                            <div class="btn-group">
                                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i
                                                        class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a data-edit="fontSize 5">
                                                            <p style="font-size:17px">Huge</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a data-edit="fontSize 3">
                                                            <p style="font-size:14px">Normal</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a data-edit="fontSize 1">
                                                            <p style="font-size:11px">Small</p>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="btn-group">
                                                <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i
                                                        class="fa fa-bold"></i></a>
                                                <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i
                                                        class="fa fa-italic"></i></a>
                                                <a class="btn" data-edit="strikethrough" title="Strikethrough"><i
                                                        class="fa fa-strikethrough"></i></a>
                                                <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i
                                                        class="fa fa-underline"></i></a>
                                            </div>

                                            <div class="btn-group">
                                                <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i
                                                        class="fa fa-list-ul"></i></a>
                                                <a class="btn" data-edit="insertorderedlist" title="Number list"><i
                                                        class="fa fa-list-ol"></i></a>
                                                <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i
                                                        class="fa fa-dedent"></i></a>
                                                <a class="btn" data-edit="indent" title="Indent (Tab)"><i
                                                        class="fa fa-indent"></i></a>
                                            </div>


                                            <div class="btn-group">
                                                <a class="btn" data-edit="justifyleft"
                                                   title="Align Left (Ctrl/Cmd+L)"><i
                                                        class="fa fa-align-left"></i></a>
                                                <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i
                                                        class="fa fa-align-center"></i></a>
                                                <a class="btn" data-edit="justifyright"
                                                   title="Align Right (Ctrl/Cmd+R)"><i
                                                        class="fa fa-align-right"></i></a>
                                                <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i
                                                        class="fa fa-align-justify"></i></a>
                                            </div>

                                            <div class="btn-group">
                                                <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i
                                                        class="fa fa-link"></i></a>
                                                <div class="dropdown-menu input-append">
                                                    <input class="span2" placeholder="URL" type="text"
                                                           data-edit="createLink"/>
                                                    <button class="btn" type="button">Add</button>
                                                </div>
                                                <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i
                                                        class="fa fa-cut"></i></a>
                                            </div>
                                            {#

                                        <div class="btn-group">
                                            <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i
                                                    class="fa fa-picture-o"></i></a>
                                            <input type="file" data-role="magic-overlay" data-target="#pictureBtn"
                                                   data-edit="insertImage"/>
                                        </div>
#}

                                            <div class="btn-group">
                                                <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i
                                                        class="fa fa-undo"></i></a>
                                                <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i
                                                        class="fa fa-repeat"></i></a>
                                            </div>
                                        </div>
                                        <div id="content" class="editor-wrapper"></div>
                                        <textarea style="display:none;"></textarea>
                                    </div>
                                </div>

                                {# <!--视频-->
                                <div class="item form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">上传视频
                                    </label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <input type="file"/>
                                    </div>
                                </div>
                                <div class="ln_solid"></div>#}

                                <div class="form-group">
                                    <div class="col-md-6 col-md-offset-3">
                                        <input type="reset" class="btn btn-primary" value="重置">
                                        <input type="button" onclick="on_submit()" class="btn btn-success" value="提交"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->

{% endblock %}

{% block script %}
    <script>

        function on_submit() {
            const data = {
                title: $("#title").val(),
                author: $("#author").val(),
                content: $("#content").html(),
                news_type: $("#news_type").val(),
                media_type: $("#media_type").val(),
            };
            $.ajax({
                //请求方式
                type: "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "{{ url_for("admin.news_form") }}",
                //数据，json字符串
                data: JSON.stringify(data),
                //请求成功
                success: function (result) {
                    alert("发布成功！")
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    alert("发布失败")
                }
            })
        }
    </script>>
{% endblock %}